<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<meta name="google-site-verification" content="i3bVXD3ywVilJt3b0Denbr2n41les3p8ciIldduw4X0" />
<link rel="icon" type="image/x-icon" href="../favicon.ico"/>
		<meta charset="utf-8">
		<title>Wanghao | 可爱的开关</title>
		<style>
			* {
			  margin: 0;
			  padding: 0;
			  box-sizing: border-box;
			  /* height: 100%; */
			  /* width: 100vw; */
			}
			html,
			body {
			  height: 100vh;
			  background-color: rgb(91, 56, 115);
			}
			.container {
			  width: 100%;
			  height: 100%;
			  display: flex;
			  flex-direction: column;
			  justify-content: center;
			  align-items: center;
			  /* background-color: black; */
			}
			
			.switch-background {
			  background-color: rgb(91, 56, 115);
			  height: 200px;
			  width: 450px;
			  border-radius: 100px;
			  margin-top: 3em;
			  /* padding-left: 15px;
			  padding-top: 5px; */
			  /* box-shadow: 12px 12px 22px gray, inset 12px 12px 10px #402955; */
			  box-shadow: 5px 5px 35px rgb(56, 32, 72),
			    -5px -5px 35px rgba(212, 176, 235, 0.636);
			  transition: box-shadow 1s ease-in;
			}
			.off-shadow {
			  box-shadow: 5px 5px 35px rgb(56, 32, 72),
			    -5px - 5px 35px rgba(212, 176, 235, 0.636);
			}
			.on-shadow {
			  /* visibility: hidden; */
			  box-shadow: 5px 5px 35px rgb(99, 17, 46),
			    -5px -5px 35px rgba(255, 217, 245, 0.468);
			  /* box-shadow: 12px 12px 22px gray, inset 12px 12px 10px #402955; */
			}
			.innerSwitch {
			  /* margin-left: 20px;
			  margin-right: 20px; */
			  background-color: #6ef0e1;
			  width: 200px;
			  height: 200px;
			  border-radius: 100%;
			  display: flex;
			  justify-content: center;
			  align-items: center;
			}
			.face {
			  width: 120px;
			  padding-bottom: 20px;
			}
			
		</style>
	</head>
	<body>
		 <div class="container">
		   <div class="switch-background off-shadow">
		     <div class="innerSwitch">
		       <svg width="285" height="150" viewBox="0 0 208 31" fill="none" xmlns="http://www.w3.org/2000/svg" class="face">
		         <path class="mouth" d="M77 30H130V30.3375C130 30.7034 118.136 31 103.5 31C88.8645 31 77 30.7034 77 30.3375V30Z" fill="#E76060" />
		         <path class="eye eye-left" d="M60 0.000190258C60 16.5687 46.5685 30.0002 30 30.0002C13.4315 30.0002 0 16.5687 0 0.000190258C0 0.000190258 13.4315 5.5 30 5.5C46.5685 5.5 60 0.000190258 60 0.000190258Z" fill="#474747" />
		         <path class="eye eye-right" d="M208 0.999969C208 17.5685 194.569 31 178 31C161.431 31 148 17.5685 148 0.999969C148 0.999969 161.431 9.00001 178 9.00001C194.569 9.00001 208 0.999969 208 0.999969Z" fill="#474747" />
		       </svg>
		     </div>
		   </div>
		 </div>
		 <div>
			 <h2>
				 游戏首页:<a href="https://wanghao221.github.io/game/" target="_blank">Wanghao | Game</a><br>
			 技术支持:<a href="https://blog.csdn.net/qq_44273429" target="_blank">海拥✘CSDN博客</a></h2></div>
		 <script src="app.js"></script>
		 <script src="https://cdn.jsdelivr.net/npm/animejs@3.2.0/lib/anime.min.js"></script>
		 <script>
			 const eyeOpenL =
			   "M60 30C60 46.5685 46.5685 60 30 60C13.4315 60 0 46.5685 0 30C0 13.4315 13.4315 0 30 0C46.5685 0 60 13.4315 60 30Z";
			 const eyeOpenR =
			   "M208 31C208 47.5685 194.569 61 178 61C161.431 61 148 47.5685 148 31C148 14.4315 161.431 1 178 1C194.569 1 208 14.4315 208 31Z";
			 const eyeClosedL =
			   "M60 0.000190258C60 16.5687 46.5685 30.0002 30 30.0002C13.4315 30.0002 0 16.5687 0 0.000190258C0 0.000190258 13.4315 5.5 30 5.5C46.5685 5.5 60 0.000190258 60 0.000190258Z";
			 const eyeClosedR =
			   "M208 0.999969C208 17.5685 194.569 31 178 31C161.431 31 148 17.5685 148 0.999969C148 0.999969 161.431 9.00001 178 9.00001C194.569 9.00001 208 0.999969 208 0.999969Z";
			 const mouthOpen =
			   "M77 60H130V73.5C130 88.1355 118.136 100 103.5 100C88.8645 100 77 88.1355 77 73.5V60Z";
			 const mouthClosed =
			   "M77 30H130V30.3375C130 30.7034 118.136 31 103.5 31C88.8645 31 77 30.7034 77 30.3375V30Z";
			 const closedEyeLeft = document.querySelector(".eye-left");
			 const closedEyeRight = document.querySelector(".eye-right");
			 const closedMouth = document.querySelector(".mouth");
			 const face = document.querySelector(".innerSwitch");
			 const switchBG = document.querySelector(".switch-background");
			 const background = document.querySelector("body");
			 let switched = false;
			 
			 face.addEventListener("click", () => {
			   var tl = anime.timeline({
			     easing: "easeOutExpo",
			     duration: 1050
			   });
			   tl.add(
			     {
			       targets: [face],
			       translateX: switched ? -1 : 250,
			       rotate: switched ? -360 : 360,
			       backgroundColor: switched ? "rgb(110,240,225)" : "rgb(243,255,148)"
			     },
			     500
			   )
			     .add(
			       {
			         targets: [switchBG, background],
			         backgroundColor: switched ? "rgb(91,56,115)" : "rgb(255,117,165)"
			       },
			       500
			     )
			     .add(
			       {
			         targets: ".eye-left",
			 
			         d: [
			           {
			             value: switched ? eyeClosedL : eyeOpenL
			           }
			         ]
			       },
			       "-=1200"
			     )
			     .add(
			       {
			         targets: ".eye-right",
			         d: [
			           {
			             value: switched ? eyeClosedR : eyeOpenR
			           }
			         ]
			       },
			       "-=1210"
			     )
			     .add(
			       {
			         targets: ".mouth",
			         d: [
			           {
			             value: switched ? mouthClosed : mouthOpen
			           }
			         ]
			       },
			       "-=1210"
			     );
			 
			   if (switched == true) {
			     //if true
			     if (switchBG.classList.contains("on-shadow")) {
			       switchBG.classList.remove("on-shadow");
			     }
			     switchBG.classList.add("off-shadow");
			     switched = false;
			   } else {
			     if (switchBG.classList.contains("off-shadow")) {
			       switchBG.classList.remove("off-shadow");
			     }
			     switchBG.classList.add("on-shadow");
			     switched = true;
			   }
			 });
			 
		 </script>
	</body>
</html>

